<template>
  <!-- 核验企业信息 -->
  <view class="ag_container">
    <view class="agree_jn">
      <!-- 步骤条 -->
      <uni-steps :options="steps" :active="1" active-color="#00a660"></uni-steps>
      <!-- 对公账户打款 -->
      <view>
        <view class="authentication_header" style="display:flex;justify-content: space-between;">
          <view>
            <p>认证方式：对公账户打款认证</p>
            <p style="margin-top:10rpx;">认证单位：{{ ruleForm.companyName }}</p>
          </view>
          <p class="btnp"><i class="iconfont" style="font-size: 22rpx;margin-right: 5rpx;">&#xe655;</i> 待认证单位打款核验</p>
        </view>
        <view class="authentication_pay">
          <p class="pay_p">付款方：{{ ruleForm.companyName }}</p>
          <!--            <p class="pay_p">付款方：<span style="padding-left: 30rpx;">{{ ruleForm.companyName }}</span></p>-->
          <img src="@/static/images/down_pay.png" alt="">
          <p class="pay_p">收款方：励氪签平台</p>
          <!--        <p class="pay_p">收款方：<span style="padding-left: 30rpx;">励氪签平台</span></p>-->
        </view>
      </view>
      <!-- 收款方银行账户信息 -->
      <view>
        <view class="authentication_header" style="display:flex;justify-content: space-between;align-items: center;">
          <p style="color: #666666;font-size: 28rpx;">收款方（励氪签平台）银行账户信息</p>
          <p size="mini" class="copyMsg" @click="copyCompanyBankInfo">复制账号</p>
        </view>
        <!-- 账号信息 -->
        <view class="authentication_payCon">
          <p>账户名称：北京如易企服科技有限公司</p>
          <p>银行账号：633917496</p>
          <p>开户银行：中国民生银行股份有限公司北京回龙观支行</p>
          <p>打款金额：0.01元（一分钱）人民币</p>
          <p>打款备注：电子签约实名认证核验</p>
        </view>
        <!-- 打款认证须知 -->
        <view class="authentication_payCon">
          <p style="color: #666666;margin-bottom:16rpx;font-size: 28rpx;">打款认证须知</p>
          <p>（1）打款方必须用当前单位：{{ ruleForm.companyName }} 的对公账户进行汇款。</p>
          <p>（2）打款金额必须为0.01元（一分钱），励氪签平台确认到账后，即可完成实名认证。</p>
          <p>（3）打款金额仅作电子签约实名认证核验专用，汇入不做退还、无发票凭证，请贵司知悉。</p>
        </view>
      </view>
      <!-- 上传付款回单 -->
      <view>
        <view class="authentication_header" style="color: #666666;font-size:28rpx;">上传付款回单</view>
        <view class="authentication_payPic">
          <view>
            <uni-file-picker :imageStyles="imageStyles" :limit="1" file-mediatype="image" :sizeType="['compressed']"
                             @select="handleFileChange"/>
          </view>
          <view class="img_span">
            打款后，请上传回单图片，并等待励氪签审核，工作日预计1小时左右通过审核！支持 .jpg .jpeg .png 格式，文件小于3M。
          </view>
        </view>
      </view>
      <!-- 提交审核 -->
      <view class="select_pay">
        <checkbox-group @change="select">
          <label>
            <checkbox value="true" color="#00a660" style="transform:scale(0.6)"/>
            我已理解并同意上述<span class="text-primary">《打款认证须知》</span></label>
        </checkbox-group>
        <view class="footer-Btn">
          <button @click="revokeCert" class="back-Btn">撤销认证</button>
          <button @click="submitForm" class="next-Btn">立即提交审核</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config'
import {getToken} from '@/utils/auth'
import {getCertPageRecord, insertCertPageRecord, revokeLegalCert} from "@/api/ec/work/company/companyCertification";

export default {
  data() {
    return {
      // url地址
      host: config.baseUrl,
      // 认证步骤
      steps: [{title: '完善单位信息'}, {title: '核验单位信息'}, {title: '实名认证通过'}],
      // 企业id
      companyId: '',
      // 1企业法定代表人 2企业授权代理人 3企业普通员工
      managerType: 1,
      // 认证打款信息
      ruleForm: {},
      // 营业执照示例图
      defaultImage: null,
      // 图片上传组件样式
      imageStyles: {width: 80, height: 80,},
      //认证勾选框
      confirmselect: '',
    };
  },
  onLoad(option) {
    this.companyId = option.id;
    this.managerType = option.managerType;
  },
  created() {
    this.initData();
  },
  methods: {
    /** 获取认证信息 */
    initData() {
      uni.showLoading({title: '加载中...', mask: true});
      getCertPageRecord(this.companyId).then((response) => {
        uni.hideLoading()
        this.ruleForm = response.data;
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /** 复制企业对公账户信息 */
    copyCompanyBankInfo() {
      let msg = ' 企业对公账户信息：'
          + '\n 账户名称：北京如易企服科技有限公司'
          + '\n 银行账号：633917496'
          + '\n 开户银：中国民生银行股份有限公司北京回龙观支行'
          + '\n 打款金额：0.01元（一分钱）人民币'
          + '\n 打款备注：电子签约实名认证核验';
      this.$copyText(msg).then(
          () => {
            this.$modal.msgSuccess("复制成功!");
          },
          () => {
            this.$modal.msgError("复制失败！");
          }
      );
    },
    /** 打款回执单图片选择 */
    handleFileChange(e) {
      this.defaultImage = e.tempFilePaths[0];
    },
    /** 协议选择框 */
    select(e) {
      this.confirmselect = e.detail.value[0]
    },
    /** 撤销认证 */
    revokeCert() {
      uni.showLoading({title: '加载中...', mask: true});
      revokeLegalCert(this.companyId).then((response) => {
        uni.hideLoading()
        this.$modal.msgSuccess("撤销认证");
        setTimeout(() => {
          uni.navigateTo({url: '/pages/authentication/companyRealname/start?id=' + this.companyId});
        }, 500);
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /**立即提交审核*/
    submitForm() {
      if (!this.defaultImage) {
        this.$modal.msgError("请上传付款回单")
        return;
      }
      if (this.confirmselect == '' || this.confirmselect == undefined) {
        this.$modal.msgError("请勾选打款须知")
        return;
      }
      uni.showLoading({title: '加载中...', mask: true});
      // 添加路径
      this.ruleForm.path = "/companyRealname/result";
      // 当前页不验证短信
      delete this.ruleForm.code;

      // 上传提交数据
      uni.uploadFile({
        url: this.host + "/ec/certification",
        filePath: this.defaultImage,
        header: {'Authorization': 'Bearer ' + getToken(),},
        name: 'remitMoneyImg',
        formData: {'certInfo': JSON.stringify(this.ruleForm)},
        success: (res) => {
          uni.hideLoading();
          let response = JSON.parse(res.data);
          if (response.code == 200) {
            let data = response.data;
            if (!!data) {
              this.ruleForm.remitMoneyImg = data.remitMoneyImg;
              let formData = {"certInfo": JSON.stringify(this.ruleForm)};
              insertCertPageRecord(formData).then((response) => {
                uni.redirectTo({url: '/pages/authentication/companyRealname/result?id=' + this.companyId + '&managerType=' + this.managerType});
              })
            } else {
              this.$modal.msgError(data.msg);
            }
          } else {
            this.$modal.msgError("操作失败！");
          }
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: $uni-bg-color;
}

.ag_container {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}

.agree_jn {
  margin-top: 40rpx;
  padding: 0 20rpx;
  position: relative;
}

.authentication_header {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #edf7f1;
  font-size: 26rpx;

  .btnp {
    border-radius: 10rpx;
    border: none;
    color: #d81e06;
    font-size: 24rpx;
    background-color: #edf7f1;
  }
}

.authentication_pay {
  font-size: 26rpx;
  font-weight: 550;
  text-align: center;
  margin-top: 20rpx;

  .pay_p {
    background-color: #faf2e9;
    padding: 12rpx 0;
    border: 1rpx solid #faf2e9;
  }

  img {
    width: 332rpx;
    height: 190rpx;
  }
}

.authentication_payCon {
  color: #999999;
  padding: 20rpx;

  p {
    margin: 0;
    font-size: 24rpx;
    padding: 1rpx 0;
  }
}

.authentication_payPic {
  display: flex;
  align-items: center;
  margin-top: 20rpx;

  .img_span {
    font-size: 24rpx;
    color: #999999;
    margin-left: 20rpx;
  }
}

.select_pay {
  color: #999999;
  margin: 40rpx 0;

  .footer-Btn {
    margin: 20rpx 10rpx 40rpx 10rpx;
    display: flex;
    justify-content: space-between;

    button {
      width: 47%;
      font-size: 28rpx;
    }

    .next-Btn {
      background-color: $uni-color-primary;
      border-radius: 10rpx;
      color: #fff;
    }

    .back-Btn {
      border-radius: 10rpx;
      border: solid 1rpx $uni-color-primary;
      color: $uni-color-primary;
      background: #fff;
    }
  }
}


</style>
